<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>作品详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../../css/myProduct.css" />
</head>
<style>
*{
  margin: 0px;
  padding: 0px;
}
  img{
    width: 50px;
    height: 50px;
  }
  Body{
      background-color: #F4F4F4;
  }
  .productList{
    background-color: green;
  }
  ul{
    background-color:  	#F4F4F4;
  }
  li{
    background-color: #FFF0F5;
    margin-top: 10px;
  }
</style>
<body id="productBody">
<div class="productList">
  <ul class="media-list">
    <li class="media">
      <div class="media-left">
        <img class="media-object" src="../../image/i/1.jpg">
      </div>
      <div class="media-body">
        <p class="name">作品名称：《像素猎奇解谜》</p>
        <p class="write">完成作者：王峰</p>
        <p class="company">指导企业：犇云科技</p>
      </div>
      <div class="clear"></div>
    </li>
    <li class="media">
      <div class="media-left">
        <img class="media-object" src="../../image/i/2.jpg">
      </div>
      <div class="media-body">
        <p class="name">作品名称：《回家》</p>
        <p class="write">完成作者：李小冉</p>
        <p class="company">指导企业：政企科技</p>
      </div>
      <div class="clear"></div>
    </li>
    <li class="media">
      <div class="media-left">
        <img class="media-object" src="../../image/i/3.jpg">
      </div>
      <div class="media-body">
        <p class="name">作品名称：《流言侦探》</p>
        <p class="write">完成作者：陈思</p>
        <p class="company">指导企业：中软科技</p>
      </div>
      <div class="clear"></div>
    </li>
    <li class="media">
      <div class="media-left">
        <img class="media-object" src="../../image/i/4.jpg">
      </div>
      <div class="media-body">
        <p class="name">作品名称：《疯狂碰碰车》</p>
        <p class="write">完成作者：王思守</p>
        <p class="company">指导企业：上海交通大学附属企业</p>
      </div>
      <div class="clear"></div>
    </li>
    <li class="media">
      <div class="media-left">
        <img class="media-object" src="../../image/i/5.jpg">
      </div>
      <div class="media-body">
        <p class="name">作品名称：《黏黏虫》</p>
        <p class="write">完成作者：李芳芳</p>
        <p class="company">指导企业：质控软件</p>
      </div>
      <div class="clear"></div>
    </li>
  </ul>
</div>
</body>

<script type="text/javascript" src="../../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/main.js"></script>

<script type="text/javascript">
$(function(){
    $(".media-list li").on("click", function() {
      var i = $(this).index(); //当前索引值
      console.log(i);
      console.log(1998);
      openPageAble("productDetail","productDetail.html");
    })
})
apiready=function(){

  api.setCustomRefreshHeaderInfo({
      bgColor: '#C0C0C0',
      isScale: true,
      image: {
          pull: [
              'widget://image/loading_more.gif',
          ],
          load: [
              'widget://image/loading_more.gif',
          ]
      }
  }, function() {
      //下拉刷新被触发，自动进入加载状态，使用 api.refreshHeaderLoadDone() 手动结束加载中状态
      //下拉刷新被触发，使用 api.refreshHeaderLoadDone() 结束加载中状态
      // alert('开始加载刷新数据，摇一摇停止加载状态');
    //   api.addEventListener({
    //       name: 'shake'
    //   }, function(ret, err) {
    // //  alert("ssss");
           api.refreshHeaderLoadDone()
    //   });
  });
}

</script>
</html>
